<div class="uc_title m_10">
	<label class="current"><span>我的订单</span></label>
</div>

<div id="orderapp">
	<div>
		<table  width="800px" height='200' bgcolor='white' border='0' cellspacing='1'>
			<thead>
				<tr >
					<th>序号</th>
					<th>订单编号</th>
					<th>教练名字</th>
					<th>订单时间</th>
					<th>评价</th>
					<th>评价内容</th>
					<th>订单状态</th>

				</tr>
			</thead>
			<tbody>
				<tr v-for="(order,index) in orders">
					<td>{{index+1}}</td>
					<td>{{order.orderNumber}}</td>
					<td>{{order.coach.cname}}</td>
					<td>{{order.orderTime}}</td>
					<td v-if="order.evaluation ==1">好评</td>
					<td v-else-if="order.evaluation ==2">中评</td>
					<td v-else-if="order.evaluation ==3">差评</td>
					<td v-else></td>
					<td>{{order.content}}</td>
					<td v-if="order.ostatus ==1">等待上课中...</td>
					<td v-else-if="order.ostatus ==2"><button
							@click="pay(order.oid)">已完课，请确认付款</button></td>
					<td v-else-if="order.ostatus ==3">
						<button @click="remark(order.oid)">评价</button>
					</td>
					<td v-else-if="order.ostatus ==4">已结束</td>

				</tr>
			</tbody>


			<tfoot>
				<tr>
					<td colspan="7">
						<button v-for="n in totalPage" @click="goPage(n)">{{n}}</button>
					</td>
				</tr>
			</tfoot>

		</table>


	</div>
	<!-- 显示隐藏评论框  -->
	<div v-show="play">
		<div>
			选择整体评价： <label for=""><input type="radio" name="rm" value="1"
				v-model="checkedValue">好评</label> <label for=""><input
				type="radio" name="rm" value="2" v-model="checkedValue">中评</label> <label
				for=""><input type="radio" name="rm" value="3"
				v-model="checkedValue">差评</label>


		</div>
		<div>
			评价内容：
			<textarea name="content" cols="30" rows="10" v-model="content">{{content}}</textarea>
		</div>
		<div>
			<button @click="commit">提交</button>
		</div>
	</div>
</div>


<script>
		
        	new Vue({
            el: "#orderapp",
            data() {
                return {
                	orders: [],
                totalPage: 0,
                play:false,
                thisoid:0,
                checkedValue:"1",
                content:"",
               	flag12: true
                }
            },
            mounted(){
            	
          	  axios({
          		  url:"/order/userordersbypage",
          		  methods:"get",
          		  params:{"page":1}, 
          	  }).then(res =>{
          		  if(res.data.code == 200){
          			  this.orders =res.data.data.data;
          			  this.totalPage = res.data.data.totalPage;
          		  }
          	  })
            },
            methods:{
            	pay:function(oid){
            		axios({
                	url:"/order/pay",
                	methods:"get",
                	params:{"oid":oid}
                }) .then(res =>{ 
                	if(res.data.code == 200){
                    alert("确认付款成功")
                }
                	})
                	},
                	 remark:function(oid){
                		
						if(this.flag12){
							this.play=true;
							this.flag12 = false;
							this.thisoid=oid;
						}else{
							this.play = false;
							this.flag12 = true;
						}
                    },
                    commit:function(){
                        // alert(this.checkedValue+this.content);
                        // alert(this.thisoid);
                        var params = new URLSearchParams();
                        params.append("evaluation",this.checkedValue);
                        params.append("content",this.content);
                        params.append("oid",this.thisoid);
                        // alert(params)
                        axios.post("/order/remark",params).then(res =>{
                            if(res.data.code == 200){
                                layer.msg("评论成功");
                                this.flag12=true;
                                this.play=false;
                            }
                        })
                    },
                    goPage:function(n){
                    	axios({
                    		  url:"/order/userordersbypage",
                    		  methods:"get",
                    		  params:{"page":n}, 
                    	  }).then(res =>{
                    		  if(res.data.code == 200){
                    			  this.orders =res.data.data.data;
                    			  this.totalPage = res.data.data.totalPage;
                    		  }
                    	  })
                    }
                    
            }
        })
    </script>